/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState } from "react";
import Navbars from "../../computents/Navbars";
import { InfiniteScroll, List } from "antd-mobile";
import styles from "./css/list.module.css";
import { getJQListApi } from "../../api/list";
import { useLoaderData, useNavigate } from "react-router-dom";
function index() {
    let nav=useNavigate()
  const { list } = useLoaderData();
  const [JQList,setJQList]=useState(list)
  // eslint-disable-next-line no-unused-vars
  const [page,setPage]=useState(2)
  const [hasMore, setHasMore] = useState(true)
  async function loadMore() {
    setJQList(prev=>[...prev,...list])
    setPage(prev=>prev+1)
    
    if(list.length==0){
        setHasMore(false)
    }
  }
  useEffect(()=>{
    setJQList(list)
    setPage(2)
    setHasMore(false)
  },[list])
  return (
    <div>
      <Navbars title="景区门票" />
      <div className={styles.box}>
        <List header="推荐景区">
          {JQList.map((item) => {
            return (
              <List.Item key={item.id} onClick={()=>nav(`/detail/${item.id}`)}>
                <div className={styles.tu}>
                  <div>
                    <img
                      src={item.coverImageUrl}
                      alt=""
                    />
                  </div>
                  <div className={styles.name}>
                    <span>{item.name}</span>
                  </div>
                  <div>
                    <span style={{ color: "#a26913" }}>￥{item.price}</span>
                    <span style={{ color: "#ccc" }}>起</span>
                  </div>
                </div>
              </List.Item>
            );
          })}
        </List>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    </div>
  );
}

export default index;

export const loader = async () => {
  const { data: res } = await getJQListApi();
  console.log(res);

  return { list: res };
};
